<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <%- include common %>
    <style>
        body {
  height: 100%;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  background-color: #fff; }
  body * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; }
  body .limiter {
    width: 100%;
    margin: 0 auto; }
    body .limiter .container-login100 {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 15px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: relative;
      z-index: 1; }
      body .limiter .container-login100 .container-login100::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.9); }
      body .limiter .container-login100 .wrap-login100 {
        width: 500px;
        border-radius: 10px;
        overflow: hidden;
        padding: 55px 55px 37px 55px;
        background: #9152f8;
        background: -webkit-linear-gradient(top, #7579ff, #b224ef);
        background: -o-linear-gradient(top, #7579ff, #b224ef);
        background: -moz-linear-gradient(top, #7579ff, #b224ef);
        background: linear-gradient(top, #7579ff, #b224ef); }
        body .limiter .container-login100 .wrap-login100 .login100-form {
          width: 100%; }
          body .limiter .container-login100 .wrap-login100 .login100-form .login100-form-logo {
            font-size: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 auto; }
            body .limiter .container-login100 .wrap-login100 .login100-form .login100-form-logo .icon-flower {
              display: inline-block;
              font: normal normal normal 60px/1 "Material-Design-Iconic-Font";
              font-size: inherit;
              text-rendering: auto; }
          body .limiter .container-login100 .wrap-login100 .login100-form .p-t-27 {
            padding-top: 27px; }
          body .limiter .container-login100 .wrap-login100 .login100-form .p-b-34 {
            padding-bottom: 34px; }
          body .limiter .container-login100 .wrap-login100 .login100-form .login100-form-title {
            font-size: 30px;
            color: #fff;
            line-height: 1.2;
            text-align: center;
            text-transform: uppercase;
            display: block; }
          body .limiter .container-login100 .wrap-login100 .login100-form .validate-input {
            position: relative; }
          body .limiter .container-login100 .wrap-login100 .login100-form .alert-validate::before {
            visibility: visible;
            opacity: 1;
            content: attr(data-validate);
            position: absolute;
            max-width: 70%;
            background-color: #fff;
            border: 1px solid #c80000;
            border-radius: 2px;
            padding: 4px 25px 4px 10px;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
            pointer-events: none;
            color: #c80000;
            font-size: 13px;
            line-height: 1.4;
            text-align: left;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s; }
          body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 {
            width: 100%;
            border-bottom: 2px solid rgba(255, 255, 255, 0.24);
            margin-bottom: 30px; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 .input100 {
              font-size: 16px;
              color: #fff !important;
              line-height: 1.2;
              display: block;
              width: 100%;
              height: 45px;
              background: transparent;
              padding: 0 5px 0 38px; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 input {
              outline: none;
              border: none;
              overflow: visible;
              margin: 0; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 input::-webkit-input-placeholder, body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 textarea::-webkit-input-placeholder {
              color: #fff;
              font-size: 16px; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 .focus-input100 {
              position: absolute;
              display: block;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              pointer-events: none; }
              body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 .focus-input100 .iconfont {
                font-size: 20px;
                color: #fff; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 .focus-input100::before {
              content: "";
              display: block;
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 0;
              height: 2px;
              transition: all 0.4s;
              background: #fff;
              box-sizing: border-box; }
            body .limiter .container-login100 .wrap-login100 .login100-form .wrap-input100 .focus-input100::after {
              font-size: 22px;
              color: #fff;
              content: attr(data-placeholder);
              display: block;
              width: 100%;
              position: absolute;
              top: 6px;
              left: 0px;
              padding-left: 5px;
              transition: all 0.4s;
              box-sizing: border-box; }
          body .limiter .container-login100 .wrap-login100 .login100-form .contact100-form-checkbox {
            padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 35px; }
            body .limiter .container-login100 .wrap-login100 .login100-form .contact100-form-checkbox .input-checkbox100 {
              box-sizing: border-box;
              padding: 0;
              display: none;
              outline: none;
              border: none;
              overflow: visible; }
            body .limiter .container-login100 .wrap-login100 .login100-form .contact100-form-checkbox .label-checkbox100 {
              font-size: 13px;
              color: #fff;
              line-height: 1.2;
              display: block;
              position: relative;
              padding-left: 26px;
              cursor: pointer; }
            body .limiter .container-login100 .wrap-login100 .login100-form .contact100-form-checkbox .label-checkbox100::before {
              content: "\f26b";
              font-family: Material-Design-Iconic-Font;
              font-size: 13px;
              color: transparent;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              width: 16px;
              height: 16px;
              border-radius: 2px;
              background: #fff;
              left: 0;
              top: 50%;
              box-sizing: border-box;
              transform: translateY(-50%); }
            body .limiter .container-login100 .wrap-login100 .login100-form .contact100-form-checkbox label {
              margin: 0;
              display: block; }
          body .limiter .container-login100 .wrap-login100 .login100-form .container-login100-form-btn {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center; }
            body .limiter .container-login100 .wrap-login100 .login100-form .container-login100-form-btn .login100-form-btn {
              font-size: 16px;
              color: #555555;
              line-height: 1.2;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 20px;
              min-width: 120px;
              height: 50px;
              border-radius: 25px;
              background: #9152f8;
              background: linear-gradient(bottom, #7579ff, #b224ef);
              position: relative;
              z-index: 1;
              transition: all 0.4s; }
            body .limiter .container-login100 .wrap-login100 .login100-form .container-login100-form-btn .login100-form-btn::before {
              content: "";
              display: block;
              position: absolute;
              z-index: -1;
              width: 100%;
              height: 100%;
              border-radius: 25px;
              background-color: #fff;
              top: 0;
              left: 0;
              opacity: 1;
              transition: all 0.4s;
              box-sizing: border-box; }
            body .limiter .container-login100 .wrap-login100 .login100-form .container-login100-form-btn button {
              outline: none !important;
              border: none;
              background: transparent; }
          body .limiter .container-login100 .wrap-login100 .login100-form .p-t-90 {
            padding-top: 90px; }
          body .limiter .container-login100 .wrap-login100 .login100-form .text-center {
            text-align: center !important; }
            body .limiter .container-login100 .wrap-login100 .login100-form .text-center .txt1 {
              font-size: 13px;
              color: #e5e5e5;
              line-height: 1.5; }
            body .limiter .container-login100 .wrap-login100 .login100-form .text-center a {
              font-size: 14px;
              line-height: 1.7;
              color: #666666;
              margin: 0px;
              transition: all 0.4s;
              text-decoration: none;
              background-color: transparent; }
            body .limiter .container-login100 .wrap-login100 .login100-form .text-center * {
              padding: 0px;
              box-sizing: border-box; }

    </style>

</head>

<body>
    <div class="limiter">
        <div class="container-login100 page-background">
            <div class="wrap-login100">
                <form class="login100-form validate-form" action="/users/register/submit" method="POST">
                    <span class="login100-form-logo">
                        <i class="iconfont icon-flower"></i>
                    </span>
                    <span class="login100-form-title p-b-34 p-t-27">
                        Register
                    </span>
                    <div class="wrap-input100 validate-input" data-validate="Enter username">
                        <input class="input100" type="text" name="username"  id="username"  placeholder="Username">
                        <span class="focus-input100 " >
                            <i class="iconfont icon-wo"></i>
                        </span>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate="Enter password">
                        <input class="input100" type="password" name="password"  id="password"  placeholder="Password">
                        <span class="focus-input100" >
                            <i class="iconfont icon-iconset0114"></i>
                        </span>
                    </div>
                    <div class="contact100-form-checkbox">
                        <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                        <label class="label-checkbox100" for="ckb1">
                            Remember me
                        </label>
                    </div>
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" onclick="hanlderlogin()">
                            Register
                        </button>
                    </div>
                    <div class="text-center p-t-90">
                        <a class="txt1" href="#">
                            Go to login
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>

        // 注册
        var pswreg = /^[\w$]{6,12}$/;
        // function hanlderlogin() {
        //     $.ajax({
        //         url: "/register/submit",
        //         type: "post",
        //         data: {
        //             username: $("#username").val(),
        //             password: $("#password").val(),
        //         },
        //         success(res) {
        //             console.log(res);
        //             alert(res.msg);
        //             if (res.type) {
        //                 location.href = "/"
        //             } else {
        //                 location.reload();
        //             }
        //         }
        //     })
        // }

    </script>

</body>

</html>